import React, {memo, useEffect} from 'react';
import {FlatList, StyleSheet, View, Image} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import PositionLayout from '../positionLayout';
// import list from './data.json';

const styles = StyleSheet.create({
  FlatList: {
    paddingTop: 40,
    minHeight: 500,
    width: '100%',
    backgroundColor: '#fff',
  },
  loadingbox: {
    width: '100%',
    minHeight: 500,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    backgroundColor: '#fff',
  },
  loadingimg: {
    width: 30,
    height: 30,
  },
  sorry: {
    width: 100,
    height: 100,
  },
});

const ListLayout = props => {
  const dispatch = useDispatch();
  const list = useSelector(state => state.home.layoutData);
  const isNoData = useSelector(state => state.home.isNoData);
  const {onScroll} = props;
  // list.length = 0;
  useEffect(() => {
    dispatch({type: 'home/layoutInit'});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (isNoData) {
    return (
      <View style={styles.loadingbox}>
        <Image
          style={styles.sorry}
          source={require('../../assets/image/sorry.png')}
        />
      </View>
    );
  } else {
    return (
      <FlatList
        initialNumToRender={8} // 初始渲染个数
        onScroll={onScroll}
        // style={style.FlatList}
        contentContainerStyle={styles.FlatList}
        data={list}
        renderItem={renderItem}
        // onEndReachedThreshold={0.3}
        keyExtractor={(item, index) => index}
        numColumns={1}
        /* 分割组件 */
        /* 列表为空时 */
        ListEmptyComponent={HomeLoading}
      />
    );
  }
};
const renderItem = ({item, index}) => {
  return <PositionLayout item={item} />;
};
const HomeLoading = () => {
  return (
    <View style={styles.loadingbox}>
      <Image
        style={styles.loadingimg}
        source={require('../../assets/image/loading.gif')}
      />
    </View>
  );
};
export default memo(ListLayout);
